<template>
  <div v-loading="loading" class="app-content">
    <!-- 头部区域 -->
    <div class="text-center mb-12">
      <div class="inline-block rounded-full mb5" style="background-color: var(--el-bg-color)">
        <img src="@/assets/logo.png" alt="Logo" class="w-20 h-20" />
      </div>
      <h1 class="text-3xl font-bold mb-2" style="color: var(--el-text-color-primary)">{{ site.title || '多客云服务' }}</h1>
      <p class="text-lg" style="color: var(--el-text-color-regular)">系统授权信息管理</p>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-4xl mx-auto">
      <!-- 授权状态卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <!-- 授权等级 -->
        <el-card shadow="hover">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold" style="color: var(--el-text-color-primary)">授权等级</h3>
            <dk-icon icon="Flag"></dk-icon>
          </div>
          <div class="text-center">
            <el-tag v-if="site.level === '1'" type="danger" size="large" class="px-4 py-2">开发版</el-tag>
            <el-tag v-else-if="site.level === '2'" type="success" size="large" class="px-4 py-2">专业版</el-tag>
            <el-tag
              v-else-if="site.level === '3'"
              type="warning"
              size="large"
              class="px-4 py-2"
              style="background-color: #000; color: #ffd24a; border-color: #000"
              >商业版</el-tag
            >
            <el-tag v-else type="success" size="large" class="px-4 py-2">商业授权</el-tag>
          </div>
          <p class="text-sm mt-2 text-center" style="color: var(--el-text-color-regular)">{{ getLevelDescription(site.level) }}</p>
        </el-card>

        <!-- 系统版本 -->
        <el-card shadow="hover">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold" style="color: var(--el-text-color-primary)">系统版本</h3>
            <dk-icon icon="Box" color="var(--el-color-success)"></dk-icon>
          </div>
          <div class="text-center">
            <div class="text-2xl font-bold mb-2" style="color: var(--el-color-success)">v{{ site.version?.version || '1.0' }}</div>
            <p class="text-sm" style="color: var(--el-text-color-regular)">当前运行版本</p>
          </div>
        </el-card>

        <!-- 授权状态 -->
        <el-card shadow="hover">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold" style="color: var(--el-text-color-primary)">运行状态</h3>
            <dk-icon icon="CircleCheck" color="var(--el-color-warning)"></dk-icon>
          </div>
          <div class="text-center">
            <el-tag v-if="site.status === '0'" type="success" size="large" class="px-4 py-2">正常运行</el-tag>
            <el-tag v-else type="danger" size="large" class="px-4 py-2">异常状态</el-tag>
            <p class="text-sm mt-2" style="color: var(--el-text-color-regular)">{{ getStatusDescription(site.status) }}</p>
          </div>
        </el-card>
      </div>

      <!-- 详细信息卡片 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 基本信息 -->
        <el-card shadow="hover">
          <h3 class="text-lg font-semibold mb-6 flex items-center">
            <dk-icon icon="InfoFilled" color="var(--el-color-primary)" class="mr2"></dk-icon>
            基本信息
          </h3>
          <div class="space-y-4">
            <div class="flex justify-between items-center py-2 border-b" style="border-color: var(--el-border-color-lighter)">
              <span class="font-medium" style="color: var(--el-text-color-regular)">站点ID</span>
              <el-tag type="info" class="font-mono">{{ site.id }}</el-tag>
            </div>
            <div class="flex justify-between items-center py-2 border-b" style="border-color: var(--el-border-color-lighter)">
              <span class="font-medium" style="color: var(--el-text-color-regular)">绑定域名</span>
              <el-tag type="primary" class="font-mono">{{ site.domain }}</el-tag>
            </div>
            <div class="flex justify-between items-center py-2 border-b" style="border-color: var(--el-border-color-lighter)">
              <span class="font-medium" style="color: var(--el-text-color-regular)">服务器IP</span>
              <el-tag type="warning" class="font-mono">{{ site.ip }}</el-tag>
            </div>
            <div class="flex justify-between items-center py-2">
              <span class="font-medium" style="color: var(--el-text-color-regular)">企业名称</span>
              <span style="color: var(--el-text-color-primary)">{{ site.corporate_name || '未设置' }}</span>
            </div>
          </div>
        </el-card>

        <!-- 授权令牌 -->
        <el-card shadow="hover">
          <h3 class="text-lg font-semibold mb-6 flex items-center" style="color: var(--el-text-color-primary)">
            <dk-icon icon="Key" color="var(--el-color-warning)" class="mr2"></dk-icon>
            授权令牌
          </h3>
          <div class="space-y-4">
            <div
              class="p-4 rounded border"
              style="background-color: var(--el-fill-color-light); border-color: var(--el-border-color-light)"
            >
              <div class="flex justify-between items-center mb-2">
                <span class="text-sm font-medium" style="color: var(--el-text-color-regular)">Token (点击查看完整)</span>
                <el-button link size="small" icon="View" @click="onShowToken"> </el-button>
              </div>
              <div
                class="font-mono text-sm p-2 rounded cursor-pointer hover:bg-opacity-80 transition-all"
                style="background-color: var(--el-fill-color-darker); color: var(--el-text-color-primary)"
                @click="onShowToken"
              >
                {{ site.m_token }}
              </div>
            </div>
            <div class="flex justify-between items-center py-2 border-b" style="border-color: var(--el-border-color-lighter)">
              <span class="font-medium" style="color: var(--el-text-color-regular)">联系电话</span>
              <span style="color: var(--el-text-color-primary)">{{ site.phone || '未设置' }}</span>
            </div>
            <div class="flex justify-between items-center py-2">
              <span class="font-medium" style="color: var(--el-text-color-regular)">QQ号码</span>
              <span style="color: var(--el-text-color-primary)">{{ site.qq || '未设置' }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <dk-cloud-login ref="cloudLoginRef" />
  </div>
</template>

<script setup>
import { ref, onMounted, defineOptions } from 'vue'
import { ElMessageBox } from 'element-plus'
import { View } from '@element-plus/icons-vue'
import { getSiteMsg } from '@/api/cloud/cloud'

defineOptions({
  name: 'CloudIndex'
})

// 响应式数据
const site = ref({
  version: {}
})
const loading = ref(true)
const cloudLoginRef = ref()

// 生命周期
onMounted(() => {
  onGetSiteMsg()
})

// 获取站点信息
function onGetSiteMsg() {
  loading.value = true
  getSiteMsg()
    .then((res) => {
      site.value = res.data
      site.value.level = '0'
      loading.value = false
    })
    .catch((res) => {
      cloudLoginRef.value.show()
      site.value = res.data || { version: {} }
      loading.value = false
    })
}

// 显示完整Token
function onShowToken() {
  ElMessageBox.alert(site.value.token || '暂无Token', '完整Token', {
    confirmButtonText: '确定',
    customClass: 'token-dialog'
  })
}

// 获取等级描述
function getLevelDescription(level) {
  const descriptions = {
    1: '适用于开发者模块开发版本',
    2: '适用于中小型企业',
    3: '适用于大型企业并提供更好的服务',
    0: '永久免费商用'
  }
  return descriptions[level] || '未知等级'
}

// 获取状态描述
function getStatusDescription(status) {
  const descriptions = {
    0: '系统运行正常，所有功能可用',
    1: '系统存在异常，请联系技术支持'
  }
  return descriptions[status] || '状态未知'
}

// 格式化时间
function formatTime(timestamp) {
  if (!timestamp) return '未知'
  const date = new Date(timestamp * 1000)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}
</script>

<style scoped lang="scss">
// Token对话框样式
:deep(.token-dialog) {
  .el-message-box__content {
    word-break: break-all;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    padding: 20px;
    background-color: var(--el-fill-color-light);
    border-radius: 6px;
    margin: 10px 0;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .grid {
    &.grid-cols-1.md\\:grid-cols-3 {
      @apply grid-cols-1;
    }

    &.grid-cols-1.lg\\:grid-cols-2 {
      @apply grid-cols-1;
    }
  }
}
</style>
